"use client";

import React from "react";
import Image from "next/image";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input, Flex } from "antd";
import Link from "next/link";

export default function page() {
  const onFinish = (values: unknown) => {
    console.log("Received values of form: ", values);
  };
  return (
    <>
      <div className="w-[622px] h-[800px]  bg-white px-[108px] py-10">
        <h2 className="font-bold text-[34px] text-[#333] leading-9 mx-auto text-center">
          注册
        </h2>
        <Form
          name="login"
          initialValues={{ remember: true }}
          style={{ maxWidth: 406 }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: "请输入邮箱!" }]}
             className="mt-7"
          >
            <Input
              prefix={
                <Image
                  src={"/assets/auth/email.png"}
                  alt=""
                  width={30}
                  height={30}
                />
              }
              placeholder="请输入邮箱"
              className="h-[55px] text-[18px] text-[#697E95]"
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入验证码!" }]}
             className="mt-5"
          >
            <Input
              prefix={
                <Image
                  src={"/assets/auth/code.png"}
                  alt=""
                  width={30}
                  height={30}
                />
              }
              type="password"
              placeholder="请输入验证码"
              className="h-[55px] text-[18px] text-[#697E95]"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "请输入邮箱验证码!" }]}
             className="mt-5"
          >
            <Input
              prefix={
                <Image
                  src={"/assets/auth/code.png"}
                  alt=""
                  width={30}
                  height={30}
                />
              }
              type="password"
              placeholder="请输入邮箱验证码"
              className="h-[55px] text-[18px] text-[#697E95]"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "不少于6位，不应包含特殊字符或空格!" }]}
             className="mt-5"
          >
            <Input
              prefix={
                <Image
                  src={"/assets/auth/password_icon.png"}
                  alt=""
                  width={30}
                  height={30}
                />
              }
              type="password"
              placeholder="不少于6位，不应包含特殊字符或空格"
              className="h-[55px] text-[18px] text-[#697E95]"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "不少于6位，不应包含特殊字符或空格!" }]}
             className="mt-5"
          >
            <Input
              prefix={
                <Image
                  src={"/assets/auth/password_icon.png"}
                  alt=""
                  width={30}
                  height={30}
                />
              }
              type="password"
              placeholder="不少于6位，不应包含特殊字符或空格"
              className="h-[55px] text-[18px] text-[#697E95]"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "推荐人用户编号 或 渠道邀请码!" }]}
             className="mt-5"
          >
            <Input
              prefix={
                <Image
                  src={"/assets/auth/invite.png"}
                  alt=""
                  width={30}
                  height={30}
                />
              }
              type="password"
              placeholder="推荐人用户编号 或 渠道邀请码"
              className="h-[55px] text-[18px] text-[#697E95]"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "客户来源!" }]}
             className="mt-5"
          >
            <Input
              prefix={
                <Image
                  src={"/assets/auth/source_icon.png"}
                  alt=""
                  width={30}
                  height={30}
                />
              }
              type="password"
              placeholder="客户来源"
              className="h-[55px] text-[18px] text-[#697E95]"
            />
          </Form.Item>

          <Form.Item className="mt-10 mb-3">
            <Button
              block
              type="primary"
              htmlType="submit"
              className="h-[55px] bg-[#0FA2FF] text-[20px] bg-opacity-50"
            >
              立即注册
            </Button>
          </Form.Item>


          <Form.Item>
            <Flex justify="space-between" align="center">
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox className="text-[18px]">我已阅读并同意 <Link href="/register_agreement" className="text-[#0FA2FF]">《用户注册协议》</Link></Checkbox>
              </Form.Item>
            </Flex>
          </Form.Item>
        </Form>
      </div>
    </>
  );
}
